<template>
	<view class="container">
		<view class="form bg-fff">
			<u-form ref="uForm">
				<u-form-item label-width="170rpx" label="摊主姓名">
					<u-input v-model="form.real_name" placeholder="请输入摊主姓名"/>
				</u-form-item>
				<u-form-item label-width="170rpx" label="手机号码">
					<u-input v-model="form.mobile" placeholder="请输入手机号码"/>
				</u-form-item>
				<u-form-item label-width="170rpx" label="店铺名称">
					<u-input v-model="form.store_name" placeholder="请输入店铺名称"/>
				</u-form-item>
				<view class="form-item" :style="isOther?'':'border-bottom: 1px solid #f4f6f8;'">
					<view class="form-item-label">店铺分类</view>
					<view class="form-item-txt">
						<view class="form-item-box">
							<view class="form-item-txt-item" v-for="(item,index) in storeClassification" :key="index" @click="ficationFun(item.text,index)" :class="index == ficationIndex?'form-item-txt-ele':''">
								{{ item.text }}
							</view>
						</view>
					</view>
				</view>
				<u-form-item label-width="170rpx" label=" " v-if="isOther">
					<u-input v-model="form.cate_name" placeholder="请输入店铺分类"/>
				</u-form-item>
			</u-form>
		</view>

		<view class="form bg-fff">
			<view class="form-item">
				<view class="form-item-label">省市区</view>
				<view class="form-item-txt">
					<input style="width: 400rpx;" type="text" disabled v-model="form.region"/>
					<!-- <u-icon name="arrow-right" color="#333333" size="28"></u-icon> -->
				</view>
			</view>
			<u-form ref="uForm">
				<u-form-item label-width="170rpx" label="详细地址">
					<view class="receiveDetail">
						<view class="viewAddress">
							{{vuex_stall_adinfo.title?vuex_stall_adinfo.title:''}}
						</view>
						<view class="changeBtn" v-if="applyStatus!=10">
							<u-button type="warning" plain size="mini" @click="jump('/pages/mine/address/warehouse')">修改地址</u-button>
						</view>
					</view>
				</u-form-item>
				<u-form-item label-width="170rpx" label="详细位置">
					<u-input v-model="form.house_number" placeholder="请输入具体楼栋/门牌信息" />
				</u-form-item>
			</u-form>
		</view>
		<view class="form bg-fff">
			<view class="front-photo">门头照片</view>
			<view class="form-value">
					<u-upload 
						width="600rpx" 
						height="350rpx" 
						:header="{'Cookie': 'XDEBUG_TRIGGER=;'}"
						:form-data="{
							token: token,
							app_id: app_id,
						}"
						upload-text=" "
						max-count="1"
						name="iFile"
						:action="$setting.baseUrl()+'/file.upload/image'" 
						@on-success="handleUploadSuccess()"
						@on-remove="handleUploadRemove()"></u-upload>
				</view>
		</view>

		<view v-if="applyStatus!=10" @click="send" class="submitNow">立即提交</view>
		<view v-else class="submitNow" style="background:#d8d8d8">审核中</view>

		<u-select v-model="regionShow" mode="mutil-column-auto" :default-value="regionDefault" :list="regionList"
			@confirm="regionConfirm"></u-select>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				token: uni.getStorageSync('token'),
				app_id: uni.$setting.appId,
				hasStore: true,
				form: {
					photo: [],
					region:"请选择省市区",
					province_id:'',
					city_id:'',
					county_id:'',
				},
				regionList: [],
				regionShow: false,
				regionDefault: [0, 0, 0],
				longitude: 0,
				latitude: 0,
				storeInfo: {},
				warehouseInfo: {},
				applyStatus:-1,
				storeClassification:[{
					text:'外卖点'
				},{
					text:'饭店'
				},{
					text:'夜宵摊'
				},{
					text:'其他'
				}],
				isOther:false,
				ficationIndex:-1,
			}
		},
		onLoad() {
			this.$store.commit('stall_adr_reset');
			this.getRegion();
			this.getApplyStatus();
			
			// #ifdef MP-WEIXIN  
			this.getHttp();
			// #endif
			
			// #ifdef H5 
			this.getH5weizhi();
			// #endif
		},
		computed: {
		    ...mapState(['vuex_stall_adinfo']),
		},
		onShow() {
			// console.log(this.vuex_stall_adinfo,'this.vuex_stall_adinfo')
			if(this.vuex_stall_adinfo){
				this.$set(this.form, 'region',this.vuex_stall_adinfo.province + this.vuex_stall_adinfo.city + this.vuex_stall_adinfo.district);
				this.$set(this.form, 'address',this.vuex_stall_adinfo.title);
				this.$set(this.form, 'longitude',this.vuex_stall_adinfo.longitude);
				this.$set(this.form, 'latitude',this.vuex_stall_adinfo.latitude);
			}
		},
		methods: {
			getHttp() {
				var type = 'gcj02';
		
				uni.getLocation({
					type: type,
					success: (res) => {
						uni.$u.api.tencentMapLocation(res.latitude, res.longitude).then(res => {
							console.log(res,"===========9999");
							if(res.data.result){
								this.form.province_name = res.data.result.address_component.province
								this.form.city_name =  res.data.result.address_component.city
								this.form.district_name = res.data.result.address_component.district
								this.$set(this.form, 'region',this.form.province_name + this.form.city_name + this.form.district_name);
							}

						})
					},
				});
			},
			
			getH5weizhi(){
				var type = 'wgs84';
			
		
				uni.getLocation({
					type: type,
					success: (res) => {
						uni.$u.api.jsonPTencentMapLocation(res.latitude, res.longitude).then(res => {
							console.log(res,"===========8888888888888");
							if(res.result){
								this.form.province_name = res.result.address_component.province
								this.form.city_name =  res.result.address_component.city
								this.form.district_name = res.result.address_component.district
								this.$set(this.form, 'region',this.form.province_name + this.form.city_name + this.form.district_name);
							}
				
						})
					},
				});
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			ficationFun(text,index){
				 this.ficationIndex = index
				if(index == 3){
					this.form.cate_name = ''
					this.isOther = true
				}else{
					this.form.cate_name = text
					this.isOther = false
				}
			},
			getRegion() {
				uni.$u.api.getRegion().then(res => {
					this.regionList = res.regionData;
				})
			},
			getApplyStatus() {
				uni.$u.api.getApplyStatus().then(res => {
					//10 待审核 20通过 30拒绝 -1没提交
					this.applyStatus = res.result.status;
				})
			},
			regionConfirm(e) {
				this.form.province_id = e[0].value;
				this.form.city_id = e[1].value;
				this.form.county_id = e[2].value;
				this.$set(this.form, 'region', e[0].label + e[1].label + e[2].label);
				this.regionList.forEach((item, index) => {
					if (item.label == e[0].label) {
						item.children.forEach((it, idx) => {
							if (it.label == e[1].label) {
								it.children.forEach((i, ix) => {
									if (i.label == e[2].label) {
										this.regionDefault = [index, idx, ix];
									}
								})
							}
						})
					}
				})
			},
			handleUploadSuccess(e) {
				this.form.photo.push(e.data.file_path);
			},
			handleUploadRemove(index) {
				this.form.photo.splice(index, 1);
			},

			send() {
				if (uni.$u.test.isEmpty(this.form.real_name)) {
					uni.showToast({
						title: "请输入摊主姓名",
						icon: "none"
					})
					return;
				}
				if (uni.$u.test.isEmpty(this.form.mobile)) {
					uni.showToast({
						title: "请输入手机号码",
						icon: "none"
					})
					return;
				}
				if (uni.$u.test.isEmpty(this.form.store_name)) {
					uni.showToast({
						title: "请输入店铺名称",
						icon: "none"
					})
					return;
				}
				if (uni.$u.test.isEmpty(this.form.cate_name)) {
					uni.showToast({
						title: "请输入店铺分类",
						icon: "none"
					})
					return;
				}
				if(uni.$u.test.isEmpty(this.form.province_id) && uni.$u.test.isEmpty(this.form.province_name)) {
					uni.showToast({
						title: "请选择省市区",
						icon: "none"
					})
					return;
				}
				if (uni.$u.test.isEmpty(this.form.address)) {
					uni.showToast({
						title: "请选择详细地址",
						icon: "none"
					})
					return;
				}
				if (uni.$u.test.isEmpty(this.form.house_number)) {
					uni.showToast({
						title: "请输入详细位置",
						icon: "none"
					})
					return;
				}
				if (uni.$u.test.isEmpty(this.form.photo)) {
					uni.showToast({
						title: "请上传图片",
						icon: "none"
					})
					return;
				}
				this.form.photo = JSON.parse(JSON.stringify(this.form.photo))
				let params = this.form
				uni.$u.api.postStallSubmit(params).then(res => {
					uni.showModal({
						title: '提示',
						content: '提交成功',
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								uni.navigateBack();
								// console.log('用户点击确定');
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 30rpx;
		.submitNow {
			width: 630rpx;
			background: #bb0024;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			border-radius: 50rpx;
			margin: auto;
		}
		.map {
			border-radius: 16rpx;
			padding: 32rpx;

			.map-con {
				width: 100%;
				height: 196rpx;
			}

			.map-select {
				// margin-top: 20rpx;
			}
		}
		.receiveDetail{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.viewAddress{
				max-width: 450rpx;
				.address{
					font-weight: bold;
				}
				.region{
					margin-top: 10rpx;
					color: #858585;
					font-size: 26rpx;
				}
			}
			
		}
		.form {
			padding: 20rpx 32rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			margin-top: 22rpx;
			/deep/ .u-list-item {
				background-image: url(@/static/front-photo.jpg);
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
			}
			.front-photo {
				margin: 16rpx 0;
			}
			.form-value-img {
				width: 630rpx;
				height:350rpx;
				border-radius: 30rpx;
			}

			.form-item {
				display: flex;
				align-items: center;

				.form-item-label {
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 10rpx;
					width: 170rpx;
				}
				.form-item-txt {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.form-item-txt-item {
						border: 1px solid #b8b8b8;
						border-radius: 8rpx;
						color: #797979;
						padding: 0 10rpx;
						margin-right: 10rpx;
					}
					.form-item-txt-ele {
						border: 1px solid #f3d210 !important;
					}
					.form-item-box {
						display: flex;
						justify-content: flex-start !important;
						padding: 30rpx 0;
					}
				}


				input {
					height: 96rpx;
					border-radius: 20rpx;
				}
			}

			.form-item+.form-item {
				margin-top: 20rpx;
			}
		}
		
	}
</style>